<template>
  <!-- 我的收藏列表 -->
  <view class="main">
    <!-- 无收藏展示 -->
    <view class="wu" v-if="shoucangData.length < 1">
      <image src="../../imges/shoucang.png" mode="aspectFill"></image>
      <text>暂无收藏</text>
    </view>
    <view v-if="shoucangData.length > 0">
      <view class="collection" v-for="(item, index) in shoucangData">
        <navigator
          :url="'/pages/index/personal?id=' + item.collectionId"
          hover-class="none"
          class="left"
        >
          <image :src="item.avatarUrl" mode="aspectFill"></image>
        </navigator>
        <view class="center">
          <view class="r-t">
            {{ item.realName }}
          </view>
          <view class="r-c">
            <text>等级</text>
            <text class="num">{{ item.memberLevel }}</text>
            <text>热度</text>
            <text class="hot">{{ item.userCalorificValue }}</text>
          </view>
          <view class="r-b">
            <text>组织个数</text>
            <text class="zuzhi">{{ item.userOrgNum }}</text>
          </view>
        </view>
        <view class="right">
          <text @tap="cancelRelease(item)">取消收藏</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      id: "",
      shoucangData: [],
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.shoucangList();
  },
  methods: {
    shoucangList() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url:
            "app/homePage/myAllCollection?uid=424b4ac54dff11e9ac1ffa163e4d6bc3",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageSize: 10,
            pageNumber: 1,
            type: 9,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.shoucangData = res.data.data.rows;
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    cancelRelease(item) {
      uni.showModal({
        title: "提示",
        content: "是否确定取消该条收藏",
        confirmColor: "#000000",
        cancelColor: "#007aff",
        cancelText: "再想想",
        success: (e) => {
          if (e.confirm) {
            let token = uni.getStorageSync("token");
            const that = this;
            // console.log(token, 'token')
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url:
                  "app/homePage/removeCollections?uid=fdd1ab0f760d11e99d3100163e05ff66",
                method: "POST",
                header: {
                  "content-type": "application/json;charset=UTF-8",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  type: 9,
                  collectionId: item.collectionId,
                },
              }).then((res) => {
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "取消收藏成功",
                    duration: 2000,
                    icon: "none",
                  });
                  that.shoucangList();
                } else if (res.data.code == 401) {
                  uni.showToast({
                    title: "登录失效，请重新授权登录！",
                    duration: 2000,
                    icon: "none",
                  });
                  setTimeout(() => {
                    uni.navigateTo({
                      url: "/pages/index/index",
                    });
                  }, 2000);
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  background-color: #f8f8f8;
  padding-top: 16rpx;
  .wu {
    margin-top: 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 320rpx;
      height: 260rpx;
    }

    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }
  .collection {
    padding: 33rpx 30rpx;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    position: relative;
    margin-bottom: 20rpx;
    .left {
      width: 174rpx;
      height: 174rpx;
      image {
        width: 174rpx;
        height: 174rpx;
        border-radius: 15rpx;
      }
    }
    .center {
      height: 154rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 23rpx;
      .r-t {
        font-size: 32rpx;
      }
      .r-c {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        color: #999999;
        .num,
        .hot {
          color: #2a2a2a;
          margin-left: 12rpx;
        }
        .num {
          margin-right: 30rpx;
        }
      }
      .r-b {
        font-size: 26rpx;
        color: #999999;
        .zuzhi {
          color: #2a2a2a;
          margin-left: 12rpx;
        }
      }
    }
    .right {
      height: 174rpx;
      display: flex;
      align-items: center;
      position: absolute;
      right: 30rpx;
      top: 33rpx;
      text {
        display: block;
        width: 158rpx;
        height: 66rpx;
        border-radius: 33rpx;
        line-height: 66rpx;
        text-align: center;
        background-color: #176bd8;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
}
</style>
